<template>
	<button @click="token?handleTap(item):$routers.routeToLogin(recommendId)"  class="t-class t-cell t-border">
	  <view class="t-required" style="justify-content: flex-end" v-if='required=="left"'>*</view>
	  <view class="t-required1" v-else></view>
	  <view class="t-cell-icon">
	    <image class="t-cell-icon-image" :src='icon' v-if='icon'></image>
	    <slot name="icon" v-else></slot>
	  </view>
	  <view class="t-cell-bd ml-10">
	    <view v-if="title" class="t-cell-text">{{ title }}</view>
	    <view v-if="label" class="t-cell-desc">{{ label }}</view>
	    <slot name='content'></slot>
	  </view>
	  <view  class="t-cell-ft">
	    <block v-if="value">{{ value }}</block>			
	    <block v-else>
	        <u-icon name="arrow-right" color="#c6d1e2" size="20"></u-icon>
	    </block>
	  </view>
	  <view class="t-required" style="justify-content: flex-start" v-if='required=="right"'>*</view>
	  <view class="t-required1" wx:else></view>
	</button>
</template>

<script>
	export default {		 
		props: {
			// 左侧标题
			title: {
			  type: String,
			  default: ''
			},
			//图标
			icon: {
			  type: null,
			  default: ''
			},
			// 标题下方的描述信息
			label: {
			  type: String,
			  default: ''
			},
			// 右侧内容
			value: {
			  type: String,
			   default: ''
			},
			required: {
			      type: String,
			      default: ''
			    },
			item:{
				typeof:Object
			},
			token:{
				type: String,
				default: ''
			}
		},
		data() {
            return {
	          
            }
        },
		methods:{			 
			handleTap(e){
				console.log('item',e)
				this.$emit('routeUrl',e)
			}
		}
	}
</script>

<style>
	/* component/list-group-item/index.wxss */
	.t-cell {
	  position: relative;
	  padding: 25rpx 0;
	  display: flex;
	  background: #fff;
	  color: #495060;
	  align-items: center;
	  line-height: 1.4;
	  font-size: 28rpx;
	  overflow: hidden;
	  text-align: left;
	  border-radius: 0;
	  margin-left: 40rpx;
	   margin-right: 40rpx;
	}
	
	.t-cell::after {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 200%;
	  height: 200%;
	  
	  transform: scale(0.5);
	  transform-origin: 0 0;
	  pointer-events: none;
	  box-sizing: border-box;
	  border: 0 solid #ffffff;
	  border-bottom-width: 1px;
	  left: 20rpx;
	  right: 0;
	}
	
	.t-cell-last::after {
	  display: none;
	}
	
	.t-border{
	  border-bottom: 1rpx solid #f0f0f0 !important;
	}
	
	.t-cell-icon {
	  margin-right: 10rpx;
	  display:flex;
	  align-items:center;
	}
	
	.t-cell-icon:empty {
	  display: none;
	}
	
	.t-cell-icon .t-cell-icon-image{
	  width: 48rpx;
	  height: 48rpx;
	  /* border-radius: 50%; */
	}
	
	.t-cell-bd {
	  flex: 1;
	}
	
	.t-cell-text {
	  line-height: 60rpx;
	  font-size: 32rpx;	  
	  color: #222222;
	  min-width: 150rpx;
	}
	
	.t-cell-desc {
	  line-height: 1.2;
	  font-size: 24rpx;
	  color: #80848f;
	}
	
	.t-cell-ft {
	  position: relative;
	  display: flex;
	  align-items: center;
	  text-align: right;
	  vertical-align: center;
	  color: #495060;
	  line-height: 48rpx;
	  max-width: 500rpx;
	  white-space: pre-wrap;
	  flex-wrap: wrap;
	  word-break: break-all;
	
	}
	
	.t-cell-access .t-cell-ft {
	  padding-right: 20rpx;
	  color: #888888;
	}
	
	.t-cell-access .t-cell-ft::after {
	  content: " ";
	  display: inline-block;
	  width: 15rpx;
	  height: 15rpx;
	  position: absolute;
	  top: 50%;
	  right: -10rpx;
	  border-width: 4rpx 4rpx 0 0;
	  border-color: #2d8cf0;
	  border-style: solid;
	  transform: translateY(-50%) matrix(0.71, 0.71, -.71, 0.71, 0, 0);
	}
	
	.t-required{
	  display: flex;
	  align-items: center;
	  color: red;
	  padding-top: 10rpx;
	  width: 25rpx;
	}

</style>